<template>
    <el-tabs id="app" tab-position="left" style="height: 800px">
      <el-tab-pane v-for="item in viewPageList" :label="item.name" :ref="itemRefs">
          <v-table-designer v-if="item.type == 1" :ref="(el) => setItemRef(el, item.id)"  
                            :designer-config="designerConfig">
          </v-table-designer>
          <v-page-designer  v-if="item.type == 2" :ref="(el) => setItemRef(el, item.id)"  style="height: 800px"   
                   :designer-config="designerConfig">
          </v-page-designer>
          
      </el-tab-pane>
      <el-tab-pane label="添加页面">
          <v-form-designer :designer-config="designerConfig"></v-form-designer>
      </el-tab-pane>
    </el-tabs>
 
</template>

<script setup>
    import { reactive, ref, watch, toRefs,} from 'vue'
    import { ElMessage } from 'element-plus'

    /*****请求组件引入****/
    import { viewPageListByAppMenuId, saveDesignViewPage,getViewPage } from '@/api/viewPage'
    

    const state = reactive({
      tabSelect:"",
      itemRefs:{},
      viewPageList: []
    });
    const {
      viewPageList,
      itemRefs
    } = toRefs(state);

    const parentData = defineProps({
      props: {
        id: String
      }
    });

    viewPageListByAppMenuId(parentData.props.id).then(response =>{
        state.viewPageList = response.data;
         console.log(state.viewPageList);
    });
    function setItemRef(el, key) {
	    //处理JVxeTable里面输入的数据
	    if (el) {
	        state.itemRefs["id_"+key] = el
	    }
	    console.log(el)
	    
	}


    
    const designerConfig = reactive({
      languageMenu: false,
      //externalLink: false,
      formTemplates: false,
      //eventCollapse: false,
      clearDesignerButton: false,
      importJsonButton:false,
      exportJsonButton: false,
      exportCodeButton: false,
      generateSFCButton: false,
      logoHeader:false
      //previewFormButton: false,

      //presetCssCode: '.abc { font-size: 16px; }',
    })

  //  const saveFormJson = () => {
   //   let formJson = vfDesigner.value.getFormJson()
      //TODO: 将formJson提交给后端保存接口，需自行实现！！
  //    console.log(formJson);
   ///   alert(formJson);
   //   ElMessage.success('表单已保存！')
   // }
</script>

<style lang="scss" scoped>
  #app {
    height: 100%;
  }
  #app .main-container {
    min-height: 100%;
    transition: margin-left 0.28s;
    margin-left: 0px;
    position: relative;
  }
   #app .widget-panel-header ul {
    list-style: none;
    margin-left: 50px;
  }

  #app  :deep(ul) > li {
    display: inline;
    line-height: 40px;
    float:left
  }

</style>